<template>
  <div class="detail-box-content">
    <van-pull-refresh v-model="formData.refreshing" @refresh="onRefresh">
      <van-list v-model:loading="formData.loading" :finished="formData.finished" finished-text="没有更多了" @load="onload"
        v-if="newsList.length > 0">
        <div class="item" v-for="(item, index) in newsList" :key="index" @click="goMore(item.id, item.sys)">
          <van-row justify="space-between" class="white">
            <van-col span="12" class="title">
              <van-icon name="comment" />{{ item.title }}<span class="point" v-if="item.isRead == 0"></span>
            </van-col>
            <!-- <van-col span="12" class="right">{{item.createTime}}</van-col> -->
          </van-row>
          <van-row class="line">
            <van-col span="24">
              <h2>{{ item.content }}</h2>
            </van-col>
            <!-- <van-col span="24" class="right">
          <p>{{item.content}}</p>
        </van-col> -->
          </van-row>
          <van-row justify="space-between" class="more">
            <van-col span="12">{{ item.createTime }}</van-col>
            <van-col span="12" class="right">
              <van-icon name="arrow" />
            </van-col>
          </van-row>
        </div>
      </van-list>
      <van-empty :image="require('@/assets/image/none.png')" description="暂无数据" v-if="newsList.length <= 0" />
    </van-pull-refresh>
  </div>
</template>
<script>
import { reactive, computed, onMounted, ref } from 'vue'
import { useStore } from "vuex";
import { useRouter } from "vue-router"
import { Toast } from 'vant';
import { message, setRead } from "@/api/public";
export default {

  setup() {
    const store = useStore();
    const router = useRouter()
    const user_info = computed(() => {
      return store.getters.user_info
    })
    const newsList = ref([])


    const formData = reactive({
      refreshing: false,
      loading: false,
      finished: false,
      pageSize: 3,
      pageNum: 1,
      total: 0,

    })
    onMounted(() => {
      onload()
    })
    const onRefresh = () => {
      formData.finished = false
      formData.loading = true
      formData.pageNum = 1
      newsList.value = []
      formData.refreshing = false
      onload()
    }
    const onload = async () => {
      const data = {
        userId: store.getters.user_info.id, pageNum: formData.pageNum,
        pageSize: formData.pageSize
      }
      const res = await message(data)
      formData.loading = false
      formData.pageNum++
      formData.total = res.data.data.total
      newsList.value = newsList.value.concat(res.data.data.records)
      console.log(formData.total, newsList.value.length)
      if (formData.total <= newsList.value.length) {
        formData.finished = true;
        console.log('不加载')
      }
      if (formData.pageNum > formData.total) {
        formData.finished = true;
      }
    }
    const goMore = (id) => {
      const data = { id: id }
      router.push({
        path: '/newsInfo',
        query: {
          id: id,

        }
      })
      // setRead(data).then(res => {

      // })

    }
    return {
      onRefresh,
      formData,
      newsList,
      goMore,
      onload
    }
  }
}
</script>
<style lang="less" scoped>
.detail-box-content {
  width: 90%;
  margin: 0 auto;
  padding: 30px 0px;

  .item {
    .title {
      // height: 29px;
      font-size: 30px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      font-family: Source Han Sans CN;
    }

    margin-bottom: 0.5rem;
    background: #282a2c;
    border: 1px solid #ffffff;
    border-radius: 25px;
    padding: 5% 3%;

    &:deep(.van-icon-comment) {
      font-size: 30px;
      margin-right: 10px;
    }

    .white {
      color: #333;
      font-size: 28px;
      display: flex;
      align-items: center;

      .point {
        display: inline-block;
        width: 0.15rem;
        height: 0.15rem;
        border-radius: 50%;
        background: red;
        margin-left: 10px;
      }
    }

    .right {
      text-align: right;
    }

    h2 {
      line-height: 40px;
      margin: 0.3rem 0px;
      font-weight: 400;
      color: #999;
      font-size: 26px;
    }

    .line {
      border-bottom: 1px solid #999;
      padding-bottom: 0.3rem;
    }

    p {
      white-space: nowrap;
      width: 100%;
      overflow: hidden;
      text-align: left;
      color: #999;
      text-overflow: ellipsis;
    }

    .more {
      font-size: 28px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      line-height: 60px;
    }
  }
}
</style>